<template>
	<view class="outer-sign">
		<view class="back-color-contan" v-for="item in signRecordData" :key="item._id" @click="toDetails(item)">
			<view class="right-item">
				<view class="image-bg">
					<image src="/static/icons/u4915.png" mode=""></image>
				</view>
				<view class="payment-wait" @click="toDetailSuccess">
					<view class="doctor-item">
						<view class="top-item">{{item.message}} </view>
						<view class="date-item">{{item.time}}</view>
					</view>
					<view class="team-sign">签约团队：{{item.signId?.teamId?.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getSignDetailsApi,
		getSigningRecordApi
	} from '../../../api/sign';
	// 保存签约的进度的数据
	const signRecordData = ref([])
	const signId = ref('') //签约id
	// 接收点击过来的id
	onLoad((options) => {
		console.log(options._id); //接收到签约的id
		signId.value = options._id
		console.log('签约的id', signId.value);
		getSignData()
		getDetails()
	})

	// 根据签约id去获取签约详情
	const getDetails = () => {
		getSignDetailsApi({
				_id: signId.value
			})
			.then(res => {
				if (res.code == 200) {
					console.log(res.data); //获取到点击的那个签约详情 拿到里面的state值
				}
			})
	}

	onShow(() => {
		getSignData()
	})

	// 根据签约的id去获取签约进度
	const getSignData = () => {
		console.log(111222, signId.value);
		getSigningRecordApi({
				_id: signId.value
			})
			.then(res => {
				if (res.code == 200) {
					console.log(222222222);
					console.log(res.data);
					signRecordData.value = res.data
				}
			})
	}
	const toDetails = () => {
		uni.navigateTo({
			url: `/minePackage/pages/wait-pay/wait-pay?_id=${signId.value}`
		})
	}

	// const toWaitPay = () => {
	// 	uni.navigateTo({
	// 		url: '/minePackage/pages/wait-pay/wait-pay'
	// 	})
	// }
	// const toDetailSuccess = () => {
	// 	uni.navigateTo({
	// 		url: '/minePackage/pages/sign-detail/sign-detail'
	// 	})
	// }
</script>

<style scoped lang="scss">
	.outer-sign {
		padding: 0 32rpx;
	}

	.active {
		background-color: #ffffff;
	}

	.back-color-contan {
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
	}

	.top-item {
		margin-left: 20rpx;
	}

	.image-bg {
		width: 60rpx;
		height: 60rpx;
		background-color: #2984f8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		margin-top: 40rpx;

		image {
			width: 32rpx;
			height: 28rpx;
		}
	}

	.arrow-item {
		position: absolute;
		left: 102rpx;
		top: 280rpx;
		transform: rotate(52deg);

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.left-arrow {
		position: absolute;
		left: 102rpx;
		top: 60rpx;
		transform: rotate(52deg);

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.right-arrow {
		position: absolute;
		left: 103rpx;
		top: 505rpx;
		transform: rotate(52deg);

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.line-image {
		width: 10rpx;
		height: 128rpx;
		margin-left: 25rpx;
		margin-top: 15rpx;
	}

	.succ-bg {
		width: 60rpx;
		height: 60rpx;
		background-color: #e4e4e4;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		margin-top: 40rpx;

		image {
			width: 32rpx;
			height: 28rpx;
		}
	}

	.left-item {
		margin: 30rpx 20rpx;
	}

	.right-item {
		display: flex;
		margin-top: 10rpx;
		// margin-left: 20rpx;
		padding: 0 32rpx;
		position: relative;
	}

	.payment-wait {
		width: 564rpx;
		height: 180rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		margin: 20rpx 0 10rpx;
	}

	.sign-apply {
		width: 564rpx;
		height: 174rpx;
		border-radius: 40rpx;
		background-color: #f2f2f2;
		margin-top: 30rpx;
	}

	.doctor-item {
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.date-item {
		font-size: 24rpx;
		color: #999999;
	}

	.team-sign {
		font-size: 24rpx;
		color: #999999;
		margin-left: 40rpx;
	}

	.buttom-sign {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.apply-success {
		font-size: 32rpx;
		color: #999999;
	}

	.image-san {
		image {
			position: absolute;
			left: 110rpx;
			top: 58rpx;
			width: 40rpx;
			height: 38rpx;
			transform: rotate(412deg);
		}

	}

	.image-san-san {
		image {
			position: absolute;
			left: 110rpx;
			top: 260rpx;
			width: 40rpx;
			height: 38rpx;
			transform: rotate(412deg);
		}
	}
</style>
<style>
	page {
		background-color: #f7fafd;
		/* 自定义颜色 */
	}
</style>